  <template>
  <!-- 最大盒子 -->
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'编辑资料'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }">
    <view class="max_box" :style="{paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
      <!-- :style="{paddingTop:(safeAreaInsets?.top + 44) + 'px',height: (100 + 'vh') - (safeAreaInsets?.top + 44) + 'px'}" -->
      <!-- 标题 -->
      <!-- <u-navbar
        title="编辑资料"
        :titleStyle="state.titleStyle"
        :placeholder="true"
        :fixed="false"
        autoBack="true"
        :size="state.size"
      >
      </u-navbar> -->

      <!-- 头像 -->
      <view class="head area">
        <!-- 头像边框 -->
        <button class="Head_border" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <!-- 头像 && 相机 -->
          <up-avatar :size="state.size" :src="sheep.$url.cdn(state.formData.avatar)"></up-avatar>
          <!-- 相机 -->
          <!-- <view class="camera">
            <image :src="sheep.$url.cdn('/uploads/uniapp_image/user/xxj.png')" mode="scaleToFill"/>
          </view> -->
        </button>
      </view>

      <!-- 表单结构 -->
      <view class="form_data">
        <u--form labelPosition="left" :model="state.formData" :rules="state.rules" ref="formRole">
          <u-form-item :labelWidth="100" label="昵称" prop="nickname" borderBottom ref="nickname">
            <!-- @change="blurname" -->
            <u--input disabled :disabledColor="'#ffffff'"  placeholder="输入您的昵称" v-model="state.formData.nickname"  border="none"></u--input>
          </u-form-item>
          <u-form-item :labelWidth="100" label="性别" prop="gender" borderBottom ref="gender">
            <u--input disabled :disabledColor="'#ffffff'"  v-model="sex_list[userStore.userInfo.gender]" border="none"></u--input>
          </u-form-item>
          <u-form-item :labelWidth="100" label="生日" prop="birthday" borderBottom ref="birthday">
            <u--input disabled :disabledColor="'#ffffff'"  v-model="userStore.userInfo.birthday" border="none"></u--input>
          </u-form-item>
        </u--form>
      </view>

      <!-- 底部按钮 -->
      <view>
        <s-button @netWork="netWork" :text="text"></s-button>
      </view>
    </view>
  </s-layout>

</template>
<script setup>
import { onLaunch, onLoad } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import sheep from "@/sheep";
const { safeAreaInsets } = uni.getSystemInfoSync();
const userStore = sheep.$store('user');

onLoad(() => {
  // userProfileAPI();
});
const text = ref("立即修改");
const state = reactive({
  // text: "暂无头像",
  titleStyle: {
    color: "$uni-text-color", // 文字颜色
    fontWeight: "600",
  },
  sex: "",
  size: "184rpx",
  formData: {
    // 表单数据
    nickname: userStore.userInfo.nickname,
    avatar: userStore.userInfo.avatar,
    // gender: "",
  },
  rules: {
    // 表单验证
    nickname: {
      type: "string",
      required: true,
      message: "请填写昵称",
      trigger: ["blur", "change"],
    },
    
  },
});

// 选择头像
function onChooseAvatar(e) {
    const tempUrl = e.detail.avatarUrl || '';
    uploadAvatar(tempUrl);
}
async function uploadAvatar(tempUrl) {
    if (!tempUrl) return;
    let { url } = await sheep.$api.app.upload(tempUrl, 'ugc');
    state.formData.avatar = url;
}
const blurname = async e => {
    state.formData.nickname = e;
}

// 上传图片
// const uploadPictures = () => {
//   uni.chooseImage({
//     count: 1, //默认9
//     sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
//     sourceType: ["album", "camera"], //从相册选择 && 调取摄像头
//     success: function (res) {
//       // console.log('相片1',res);
//       state.src = res.tempFilePaths.join(",");
//       state.formData.avatar = state.src;
//       // console.log('相片',state.formData.avatar);
//       // console.log(JSON.stringify(res.tempFilePaths));
//     },
//   });
// };
const sex_list = reactive(["女", "男"]);

const formRole = ref(null);
// 更改按钮
const netWork = () => {
  formRole.value.validate().then((res) => {
      sheep.$helper.toast(res.msg);
      userUpdateAPI(state.formData);
      setTimeout(() => {
        sheep.$store('user').getInfo();
        uni.navigateBack();
      }, 2000);
    })
    .catch((errors) => {
    });
};

// 更新用户信息接口
const userUpdateAPI = async (data) => {
  const res = await sheep.$api.user.userUpdate(data);
};

// 获取用户数据
const userProfileAPI = async () => {
  // const res = await sheep.$api.user.userProfile();
  // state.formData.avatar = res.data.avatar
  // state.formData.nickname = res.data.nickname
  // state.formData.gender = res.data.gender
  // state.sex = res.data.gender
  // if(state.sex == 0) {
  //   state.sex = '女'
  // } else {
  //   state.sex = '男'
  // }
};
</script>
  
<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}
// 版心
.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}
:deep(.u-form-item__body.data-v-b4fd400b) {
  padding: 20rpx 0 20rpx 30rpx;
}
:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
  font-weight: $uni-font-weight;
}
:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
  margin-left: 200rpx !important;
}
// 最大盒子
.max_box {
  height: calc(100vh - 180rpx);
  // height: 100%;
  width: 100%;
  background-color: #ffffff;
  // 头像
  .head {
    margin-top: 96rpx;
    height: 196rpx;
    margin-bottom: 100rpx;
    // 头像边框
    .Head_border {
      width: 189rpx;
      height: 189rpx;
      // border: 2rpx solid $uni-color-primary;
      border-radius: 50%;
      margin: 0 auto;
      // padding-top: 6rpx;
      // padding-left: 6rpx;
      padding: 0;
      position: relative;
      // 相机
      .camera {
        position: absolute;
        bottom: 0;
        right: 0;
        image {
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
  .form_data {
    margin: 0 58rpx;
    width: calc(100% - 116rpx);
  }
}
:deep(.u-input){
  background-color: transparent !important;
}
</style>